<template>
	<view>
		<view class="cu-custom"> <!-- :style="[{height:customBar + 'px'}]"> -->
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back" v-if="isBack"></text>
					<slot name="backText" v-if="isBack"></slot>
				</view>
				<view class="content" :style="[{top:statusBar + 'px'}]">
					<slot></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
		<view :style="{height: customBar + 'px'}"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	const statusBar = ref(0);
	const customBar = ref(0);
	const style = computed(() => {
		let bgImage = props.bgImage;
		let final = `height:${customBar.value}px;padding-top:${statusBar.value}px;`;
		if (bgImage) {
			final = `${final}background-image:url(${bgImage});`;
		}
		return final
	});
	const props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		}
	});
	uni.getSystemInfo({
		success: function(e) {
			// #ifndef MP			
			statusBar.value = e.statusBarHeight;
			if (e.platform == 'android') {
				customBar.value = e.statusBarHeight + 50;
			} else {
				customBar.value = e.statusBarHeight + 45;
			};
			// #endif

			// #ifdef MP-WEIXIN
			statusBar.value = e.statusBarHeight;
			let custom = wx.getMenuButtonBoundingClientRect();
			customBar.value = custom.bottom + custom.top - e.statusBarHeight;
			// #endif		

			// #ifdef MP-ALIPAY
			statusBar.value = e.statusBarHeight;
			customBar.value = e.statusBarHeight + e.titleBarHeight;
			// #endif
			
		}
	})

	const emits = defineEmits(["back"]);
	function BackPage() {
		if (!props.isBack) return;
		emits("back");
		// if (typeof props.isBack === "string") {
		// 	uni.navigateTo({
		// 		url: props.isBack
		// 	});
		// } else {
		// 	uni.navigateBack({
		// 		delta: 1
		// 	});
		// }
	}
</script>

<style>

</style>